<!DOCTYPE html>
<html lang="zh" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>课程列表 - 后台管理系统模板</title>
    <link rel="icon" href="images/favicon.ico" type="image/ico">
    <meta name="keywords" content="LightYear,光年,后台模板,后台管理系统,光年HTML模板">
    <meta name="description" content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。">
    <meta name="author" content="yinqi">
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/materialdesignicons.min.css" rel="stylesheet">
    <link href="css/style.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/webuploader/0.1.5/webuploader.css" rel="stylesheet" type="text/css" />
    <script src="js/head.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="js/login/login.js"></script>
    <script src="js/http.js"></script>

    <style type="text/css">


        #picker {
            display: inline-block;
            line-height: 1.428571429;
            vertical-align: middle;
            margin: 0 12px 0 0;
        }
    </style>
</head>

<body>
<div class="lyear-layout-web" id="vue">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">

            <!-- logo -->
            <div id="logo" class="sidebar-header">
                <a href="index.html"><img src="images/logo-sidebar.png" title="LightYear" alt="LightYear"/></a>
            </div>
            <div class="lyear-layout-sidebar-scroll">

                <nav class="sidebar-main">
                    <ul class="nav nav-drawer">
                        <ul class="nav nav-drawer">
                            <script src="js/leftNav.js"></script>
                        </ul>                    </ul>
                </nav>

                <div class="sidebar-footer">
                    <p class="copyright">Copyright &copy; 2019. <a target="_blank"
                                                                   href="http://lyear.itshubao.com">IT书包</a> All rights
                        reserved.</p>
                </div>
            </div>

        </aside>
        <!--End 左侧导航-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">

                <div class="row">
                    <div class="col-lg-12">
                        <div class="card">
                            <div class="card-toolbar clearfix">
                                <form class="pull-right search-bar" method="get" action="#!" role="form">
                                    <div class="input-group">
                                        <div class="input-group-btn">
                                            <input type="hidden" name="search_field" id="search-field" value="title">
                                            <button class="btn btn-default" id="search-btn" type="button"
                                                    aria-haspopup="true" aria-expanded="false"
                                                    @click="fuzzyQueryCourse">
                                                搜索
                                            </button>
                                        </div>
                                        <input type="text" class="form-control" value="" name="keyword"
                                               placeholder="请输入课程名" v-model="inputText">
                                    </div>
                                </form>
                                <div class="toolbar-btn-action">
                                    <a class="btn btn-primary m-r-5" href="addCourse.html"><i class="mdi mdi-plus"></i>
                                        新增</a>
                                    <a class="btn btn-danger" href="#!"><i class="mdi mdi-window-close"></i> 删除</a>
                                    <!--<button class="btn btn-info" href="#!" data-toggle="modal"
                                            data-target="#editCourse" @click="getCourseClassify"><i class="mdi mdi-apple-finder"></i>课程类型管理
                                    </button>-->
                                </div>
                                <!--编辑课程信息 模态框-->
                                <div class="modal fade" id="editCourse" tabindex="-1" role="dialog"
                                     aria-labelledby="myModalLabel">
                                    <div class="modal-dialog" role="document">
                                        <div class="modal-content">
                                            <div class="modal-header">
                                                <button type="button" class="close" data-dismiss="modal"
                                                        aria-label="Close"><span aria-hidden="true">&times;</span>
                                                </button>
                                                <h4 class="modal-title" id="myModalLabel">编辑课程信息</h4>
                                            </div>
                                            <div class="modal-body">
                                                <label class="control-label">章节信息：</label>
                                                <div  id="chapterList">
                                                    <div class="alert alert-success alert-dismissible" role="alert" v-for="chapter in chapterList">
                                                        <button type="button" class="close" data-dismiss="alert"
                                                            aria-label="Close"><span
                                                            aria-hidden="true" @click="deleteChapter(chapter.id)">&times;</span></button>
                                                        <strong>{{chapter.title}}</strong>
                                                    </div>
                                                </div>
                                                <div  id="uploadList">

                                                </div>
                                                <div class="form-group col-md-12">
                                                    <div class="form-controls">
                                                        <ul class="list-inline clearfix lyear-uploads-pic"
                                                            id="show-uploaded-vid">
                                                            <div id="picker">选择文件</div>
                                                            <button id="ctlBtn" class="btn btn-default">开始上传</button>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="control-label">修改课程名：</label>
                                                    <input type="text" class="form-control" v-model="title"/>

                                                </div>
                                                <div>
                                                    <label class="control-label">修改课程类型：</label>
                                                    <!--<input type="text" class="form-control" v-model="typename"/>-->
                                                    <div class="form-controls">
                                                        <select name="type" class="form-control" id="type" v-model="typename">
                                                            <option v-for="list in courseClassifyList">{{list.typename}}</option>
                                                        </select>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="control-label">修改课程价格：</label>
                                                    <input type="text" class="form-control" v-model="money"/>
                                                </div>
                                                <div>
                                                    <label class="control-label">修改预览图：</label>
                                                    <div class="form-group col-md-12" id="uploadImg">
                                                        <div class="form-controls">
                                                            <ul class="list-inline clearfix lyear-uploads-pic"
                                                                id="show-uploaded-pic">
                                                                <input type="file" id="select-picture-file"
                                                                       style="display:none;" @change="uploadImg"/>
                                                                <li class="col-xs-4">
                                                                    <a class="pic-add" id="add-pic-btn"
                                                                       title="点击上传"></a>
                                                                </li>
                                                            </ul>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div>
                                                    <label class="control-label">修改课程简介：</label>
                                                    <textarea class="form-control" rows="5" value=""
                                                              placeholder="描述" v-model="synopsis"></textarea>
                                                </div>
                                                <div style="padding-top: 20px">
                                                    <input type="radio" id="one" value="0" v-model="state"/>
                                                    <label for="one" class="text-success" >上架</label>
                                                    <input type="radio" id="two" value="1" v-model="state"/>
                                                    <label for="two" class="text-danger" >下架</label>
                                                    <input type="radio" id="three" value="2" v-model="state"/>
                                                    <label for="three" class="text-brown" >待上架</label>
                                                </div>
                                                <!--<input class="form-control-static" type="text" placeholder="新增课程类型"/>
                                                <button class="btn btn-label btn-primary" type="submit"><label><i class="mdi mdi-checkbox-marked-circle-outline"></i></label> 提交</button>-->
                                            </div>
                                            <div class="modal-footer">

                                                <button type="button" class="btn btn-primary"
                                                @click="updateCourse">保存信息
                                                </button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--end-->
                            </div>
                            <div class="card-body">

                                <div class="table-responsive">
                                    <table class="table table-bordered">
                                        <thead>
                                        <tr>
                                            <th>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" id="check-all"><span></span>
                                                </label>
                                            </th>
                                            <th>课程名</th>
                                            <th>课程类型</th>
                                            <th>课程简介</th>
                                            <th>预览图</th>
                                            <th>总时长</th>
                                            <th>总播放量</th>
                                            <th>价格</th>
                                            <th>状态</th>
                                            <th>操作</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr v-for="course in courseList">
                                            <td>
                                                <label class="lyear-checkbox checkbox-primary">
                                                    <input type="checkbox" name="ids[]" value="1"><span></span>
                                                </label>
                                            </td>
                                            <td>{{course.title}}</td>
                                            <td>{{course.courseClassify.typename}}</td>
                                            <td>{{course.synopsis}}</td>
                                            <td>
                                                <div style="width: 200px;">
                                                    <div class="col-xs-12"><img v-bind:src="course.imgUrl"></div>
                                                </div>
                                            </td>
                                            <td><span v-if="course.chapter === null">0</span>
                                                <span v-else>{{course.chapter.duration}}</span>
                                            </td>
                                            <td><span v-if="course.chapter === null">0</span>
                                                <span v-else>{{course.chapter.viewCount}}</span>
                                            </td>
                                            <td><span class="label label-warning">{{course.money}}</span></td>
                                            <td><span class="label label-success" v-if="course.state===0">上架</span>
                                                <span class="label label-danger" v-else-if="course.state===1">下架</span>
                                                <span class="label label-brown" v-else-if="course.state===2">待上架</span>
                                            </td>
                                            <td>
                                                <div class="btn-group">
                                                    <button class="btn btn-xs btn-default" href="#!" title="编辑"
                                                            data-toggle="modal" data-target="#editCourse" @click="selectCourseById(course.id)"><i
                                                            class="mdi mdi-pencil" ></i></button>
                                                    <a class="btn btn-xs btn-default" href="#!" title="查看"
                                                       data-toggle="tooltip"><i class="mdi mdi-eye"></i></a>
                                                    <button class="btn btn-xs btn-default" title="删除"
                                                            data-toggle="modal" data-target="#warningModal"
                                                            @click="getCourseId(course.id)"><i
                                                            class="mdi mdi-window-close"></i></button>
                                                </div>
                                            </td>
                                        </tr>

                                        </tbody>
                                    </table>
                                    <!--警告模态框start-->
                                    <div class="modal fade " id="warningModal"
                                         tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
                                        <div class="modal-dialog " role="document">
                                            <div class="modal-content">
                                                <div class="modal-header">
                                                    <button type="button" class="close" data-dismiss="modal"
                                                            aria-label="Close"><span
                                                            aria-hidden="true">×</span></button>
                                                    <h4 class="modal-title text-danger text-center"
                                                        id="myLargeModalLabel">警告！！！</h4>
                                                </div>
                                                <div class="modal-body text-center">
                                                    即将删除课程信息及所有章节内容且无法修复！确定要删除嘛？
                                                </div>
                                                <div class="modal-footer">
                                                    <button type="button" class="btn btn-default"
                                                            data-dismiss="modal">我怂了
                                                    </button>
                                                    <button type="button" class="btn btn-primary"
                                                            data-dismiss="modal"
                                                            @click="deleteCourse(courseId)">确定
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <!--警告模态框end-->
                                </div>
                                <ul class="pagination">
                                    <li class="disabled"><span>«</span></li>
                                    <li class="active"><span>1</span></li>
                                    <li><a href="#1">2</a></li>
                                    <li><a href="#1">3</a></li>
                                    <li><a href="#1">4</a></li>
                                    <li><a href="#1">5</a></li>
                                    <li><a href="#1">6</a></li>
                                    <li><a href="#1">7</a></li>
                                    <li><a href="#1">8</a></li>
                                    <li class="disabled"><span>...</span></li>
                                    <li><a href="#!">14452</a></li>
                                    <li><a href="#!">14453</a></li>
                                    <li><a href="#!">»</a></li>
                                </ul>

                            </div>
                        </div>
                    </div>

                </div>

            </div>

        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/perfect-scrollbar.min.js"></script>
<script type="text/javascript" src="js/main.min.js"></script>
<script type="text/javascript" src="http://cdn.staticfile.org/webuploader/0.1.5/webuploader.min.js"></script>

<script type="text/javascript">





    $(document).ready(function () {


        var $list = $("#uploadList");
        var $btn = $("#ctlBtn");
        var state = 'pending'; // 上传文件初始化
        var timer;
        var fileArray = [];
        var uploader;

        $("#editCourse").on("shown.bs.modal",function() {
            uploader = WebUploader.create({

                // swf文件路径
                swf: 'http://cdn.staticfile.org/webuploader/0.1.5/Uploader.swf',

                // 文件接收服务端。
                server: 'http://localhost:9092/education_admin/upload/uploadVideo',

                // 选择文件的按钮。可选。
                // 内部根据当前运行是创建，可能是input元素，也可能是flash.
                pick: '#picker',

                // 不压缩image, 默认如果是jpeg，文件上传前会压缩一把再上传！
                resize: false,
                duplicate: true,
                chunked: true,
                threads: 5,
                chunkSize: 50 * 1024 * 1024, // 每片50M
                formData: {
                    guid: ""
                }
            });

            //点击上传之前调用的方法
            uploader.on("uploadStart", function (file) {
                console.log("上传前调用方法");
                var guid = WebUploader.Base.guid();
                var paramOb = {"guid": guid, "filedId": file.source.ruid}
                uploader.options.formData.guid = guid;
                fileArray.push(paramOb);
            });

            // 当有文件被添加进队列的时候
            uploader.on('fileQueued', function (file) {
                console.log("文件被添加进队列");
                $list.append('<div class="alert alert-success alert-dismissible" role="alert" id="' + file.id + '">'+
                    '<strong>'+ file.name +'</strong>'+
                    '<p class="state">等待上传...</p>' +
                    '</div>');
            });

            // 文件上传过程中创建进度条实时显示。
            uploader.on('uploadProgress', function (file, percentage) {
                var $li = $('#' + file.id),
                    $percent = $li.find('.progress .progress-bar');
                // 避免重复创建
                if (!$percent.length) {
                    $percent = $('<div class="progress progress-striped active">' +
                        '<div class="progress-bar" role="progressbar" style="width: 0%">' +
                        '</div>' +
                        '</div>').appendTo($li).find('.progress-bar');
                }
                $li.find('p.state').text('上传中');
                $percent.css('width', percentage * 100 + '%');
            });
            //文件成功、失败处理
            uploader.on('uploadSuccess', function (file) {
                var successFileId = file.source.ruid;
                var successDuid;
                if (fileArray.length > 0) {
                    for (var i = 0; i < fileArray.length; i++) {
                        if (fileArray[i].filedId === successFileId) {
                            successDuid=fileArray[i].guid;
                            fileArray.splice(i, 1);
                        }
                    }
                }
                clearInterval(timer);
                $('#' + file.id).find('p.state').text('已上传');
                $.post("http://localhost:9092/education_admin/upload/mergeVideo", {"guid": successDuid,"fileName": file.name}, function (resp) {
                    console.log(resp);
                    let id=vm.courseId;
                    let result = resp;
                    vm.videoUrl=result.data.videoUrl;
                    vm.chapterTitle=result.data.title;
                    vm.$options.methods.insertChapter(id);
                });

            });

            uploader.on('uploadError', function (file) {
                $('#' + file.id).find('p.state').text('上传出错');
            });

            uploader.on('uploadComplete', function (file) {
                $('#' + file.id).find('.progress').fadeOut();
            });
        });


        $('#editCourse').on('hide.bs.modal', function () {
            uploader.destroy();
            fileArray = [];
            $list.empty();
        });



        //监听上传视频按钮
        $("#ctlBtn").click(function () {
            // uploader.refresh();//在模态框加载完成之后执行重绘按钮的方法。
            // console.log("123")
            if (state === 'uploading') {
                uploader.stop();
            } else {
                uploader.upload();
            }
        });
        //监听上传图片按钮
        $("#add-pic-btn").click(function () {
            $("#select-picture-file").click();
        });
    });

    let vm = new Vue({
        el: '#vue',
        data: {
            courseList: "",
            chapterList:"",
            courseClassifyList: "",
            courseId: "",
            inputText: "",
            title:"",
            typename:"",
            synopsis:"",
            money:"",
            state:"",
            chapterTitle:"",
            videoUrl:"",
            imgUrl:"",
            charge:""
        },
        mounted: function () {
            $.ajax({
                type: "GET",
                url: baseUrl+"education_admin/course/courseList",
                data: {},
                success: function (resp) {
                    let result = resp;
                    vm.courseList = result.data;
                    console.log(vm.courseList)
                }
            })
        },
        methods: {
            /*通过id删除*/
            deleteCourse: function (courseId) {
                console.log(courseId);
                $.ajax({
                    type: "GET",
                    url: baseUrl+"education_admin/course/deleteCourse",
                    data: {
                        id: courseId,
                    },
                    success: function (resp) {
                        let result = resp;
                        alert(result.message);
                        location.reload();
                    }
                })
            },

            getCourseId: function (courseId) {
                vm.courseId = courseId;
            },
            /**
             * 模糊查询
             */
            fuzzyQueryCourse: function () {
                let title = vm.inputText;
                $.ajax({
                    type: "GET",
                    url: baseUrl+"education_admin/course/fuzzyQueryCourse",
                    data: {
                        title: title,
                    },
                    success: function (resp) {
                        let result = resp;
                        vm.courseList = result.data;
                    }
                })
            },
            /**
             * 通过id查询课程
             * @param courseId
             */
            selectCourseById:function (courseId) {
                $.ajax({
                    type: "GET",
                    url: baseUrl+"education_admin/course/selectById",
                    data: {
                        id: courseId,
                    },
                    success: function (resp) {
                        let result = resp;
                        let course = result.data;
                            vm.courseId=course.id;
                            vm.title=course.title;
                            vm.typename=course.courseClassify.typename;
                            vm.synopsis=course.synopsis;
                            vm.money=course.money;
                            vm.state=course.state;
                            vm.imgUrl=course.imgUrl;
                            vm.charge=course.charge;
                            vm.$options.methods.getChapterByCourseId(courseId);
                            vm.$options.methods.getCourseClassify();
                    }
                })
            },
            /**
             * 通过课程id获得章节列表
             * @param courseId
             */
            getChapterByCourseId:function (courseId) {
                $.ajax({
                    type: "GET",
                    url: baseUrl+"education_admin/chapter/selectByCourseId",
                    data: {
                        courseId: courseId,
                    },
                    success: function (resp) {
                        let result = resp;
                        vm.chapterList= result.data;
                    }
                })
            },


            getCourseClassify:function () {
                $.ajax({
                    type:'GET',
                    url:baseUrl+"education_admin/courseClassify/courseClassifyList",
                    success:function (resp) {
                        let result = resp;
                        vm.courseClassifyList=result.data;
                    }
                })

            },
            /**
             * 修改课程信息
             */
            updateCourse:function (courseId) {
                let id=vm.courseId;
                let title=vm.title;
                let money=vm.money;
                let typename=vm.typename;
                let synopsis=vm.synopsis;
                let state=vm.state;
                let imgUrl=vm.imgUrl;
                let charge=vm.charge;
                if (money == 0) {
                   charge=0
                }else {
                    charge=1
                }
                $.ajax({
                    type:'POST',
                    url:baseUrl+"education_admin/course/updateCourse",
                    data:{
                        id,
                        title,
                        money,
                        typename,
                        synopsis,
                        state,
                        imgUrl,
                        charge,
                    },
                    success:function (resp) {
                        let result = resp;
                        console.log("课程信息"+resp);
                        location.reload()
                    }
                })
            },
            /**
             * 上传视频
             */
            uploadVid:function () {
                let id=vm.courseId;
                let formData = new FormData();
                formData.append("file", $("#select-video-file")[0].files[0]);
                $.ajax({
                    type: 'POST',
                    url: baseUrl+"education_admin/upload/uploadFileWithRelativePath",
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (resp) {
                        let result = resp;
                        let url=baseUrl+"video/"+result.data.videoUrl;
                        vm.videoUrl=url;
                        vm.chapterTitle=result.data.title;
                        vm.$options.methods.insertChapter(id);
                    }
                });
            },
            /**
             * 上传图片
             */
            uploadImg:function () {
                let formData = new FormData();
                formData.append("file", $("#select-picture-file")[0].files[0]);
                $.ajax({
                    type: 'POST',
                    url: baseUrl+"education_admin/upload/uploadFileWithRelativePath",
                    cache: false,
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (resp) {
                        let result = resp;
                        let url=baseUrl+"view/img/"+result.data.videoUrl;
                        vm.imgUrl=url;
                        let html='<div class="col-xs-12"><img src="'+url+'"></div>';
                        $("#uploadImg").replaceWith(html);
                    }
                });
            },

            /**
             * 添加章节信息
             */
            insertChapter:function (course_Id) {
                let title=vm.chapterTitle;
                let videoUrl=vm.videoUrl;
                let courseId=course_Id;
                $.ajax({
                    type: 'POST',
                    url: baseUrl+"education_admin/chapter/insertChapter",
                    data:{
                        title,
                        videoUrl,
                        courseId,
                        state:0,
                    },
                    success: function (resp) {
                        console.log("章节信息"+resp);
                    }
                });
            },
            deleteChapter:function (chapterId) {
                let id=chapterId;
                $.ajax({
                    type:'GET',
                    url:baseUrl+"education_admin/chapter/deleteChapter",
                    data:{
                      id
                    },
                    success:function (resp) {
                        console.log(resp)
                    }
                })
            }
        }
    })
</script>
</body>
</html>